<template>
    <div class="module-content">
        <div class="module-header">
            <h2>纪念馆审核</h2>
            <!-- <div class="filter-bar">
                <el-select v-model="memberFilter" placeholder="审核状态" style="width: 120px">
                    <el-option label="全部" value="" />
                    <el-option label="待审核" value="pending" />
                    <el-option label="已通过" value="approved" />
                    <el-option label="已拒绝" value="rejected" />
                </el-select>
            </div> -->
        </div>
        <div class="table-container">
            <el-table :data="pager.lists" style="width: 100%" stripe>
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="nickname" label="用户名" />
                <el-table-column prop="avatar" label="头像" >
                    <template #default="scope">
                        <el-image :src="scope.row.avatar" fit="cover" style="width: 40px; height: 40px; border-radius: 50%;"/>
                    </template>
                </el-table-column>

                <el-table-column prop="is_disable" label="审核状态" >
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.is_disable === 1 ? 'success' : scope.row.is_disable === 2 ? 'danger' : 'warning'">
                            {{ scope.row.is_disable === 1 ? '已通过' : scope.row.is_disable === 2 ? '已拒绝' : '待审核' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="申请时间" />
                <el-table-column label="操作" >
                    <template #default="scope">
                        <el-button v-if="scope.row.is_disable === 0" size="small" type="success"
                            @click="handleApproveMember(scope.row, 1)">
                            通过
                        </el-button>
                        <el-button v-if="scope.row.is_disable === 0" size="small" type="danger"
                            @click="handleApproveMember(scope.row, 2)">
                            拒绝
                        </el-button>
                        <el-button v-if="scope.row.is_disable !== 0" size="small" type="primary"
                            @click="handleRemoveMember(scope.row)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback';
import { mu_list, mu_deal, mu_delete } from '@/api/family'
const route = useRoute()
const handleApproveMember = (row: any, is_disable: number) => {
    ElMessageBox.confirm(`确定要通过 "${row.nickname}" 的审核吗？`, '确认通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
    }).then(async () => {
        await mu_deal({id: row.id, is_disable, family_id: route.query.family_id})
        ElMessage.success('审核通过')
        getLists()
    })
}

const handleRemoveMember = (row: any) => {
    ElMessageBox.confirm(`确定要移除 "${row.nickname}" 的审核吗？`, '确认移除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
    }).then(async () => {
        await mu_delete({id: row.id, family_id: route.query.family_id})
        ElMessage.success('移除成功')
        getLists()
    })
}

// 管理数据
const queryParams = ref({
    family_id: route.query.family_id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: mu_list,
    params: queryParams.value
})
// 获取数据列表
getLists()
</script>

<style scoped>
.module-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.module-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.table-container {
    padding: 0 20px 20px;
}
</style>